<script setup lang="tsx">
import { ref, onMounted, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import { useRole } from "./utils/hook";
import { chartData, barChartData, progressData, latestNewsData } from "./data";
import { useDark, randomGradient } from "./utils";
const router = useRouter();
const treeRef = ref();
const tableRef = ref();
const { isDark } = useDark();
const { form, loading, homeData, onSearch, interfaces } = useRole(
  tableRef,
  treeRef
);
onMounted(() => {
  onSearch();
});
const handleClick = value => {
  router.push({
    path: "/communicationInterface/index",
    query: { item: value } // 将参数作为查询参数传递
  });
};
// 上面的消息通知

onUnmounted(() => {
  console.log("sse close");
});
</script>

<template>
  <div
    v-loading="loading"
    element-loading-text="加载中..."
    style="width: 98%; height: 100%"
  >
    <div class="home_top">
      <div
        v-if="interfaces && interfaces.FourthGeneration !== 0"
        class="interfaces_item"
        @click="handleClick('FourthGeneration')"
      >
        <div>4G</div>
        <div>{{ interfaces.FourthGeneration }}</div>
      </div>
      <div
        v-if="interfaces && interfaces.Ethernet !== 0"
        class="interfaces_item"
        @click="handleClick('Ethernet')"
      >
        <div>Ethernet</div>
        <div>{{ interfaces.Ethernet }}</div>
      </div>
      <div
        v-if="interfaces && interfaces.WiFi !== 0"
        class="interfaces_item"
        @click="handleClick('WiFi')"
      >
        <div>WiFi</div>
        <div>{{ interfaces.WiFi }}</div>
      </div>
      <div
        v-if="interfaces && interfaces.COM !== 0"
        class="interfaces_item"
        @click="handleClick('COM')"
      >
        <div>COM</div>
        <div>{{ interfaces.COM }}</div>
      </div>
      <div
        v-if="interfaces && interfaces.LoRa !== 0"
        class="interfaces_item"
        @click="handleClick('LoRa')"
      >
        <div>LoRa</div>
        <div>{{ interfaces.LoRa }}</div>
      </div>
      <div
        v-if="interfaces && interfaces.Zigbee !== 0"
        class="interfaces_item"
        @click="handleClick('Zigbee')"
      >
        <div>Zigbee</div>
        <div>{{ interfaces.Zigbee }}</div>
      </div>
      <div
        v-if="interfaces && interfaces.Local !== 0"
        class="interfaces_item"
        @click="handleClick('Local')"
      >
        <div>Local</div>
        <div>{{ interfaces.Local }}</div>
      </div>
    </div>
    <!-- {{ interfaces }} -->
  </div>
</template>

<style scoped sass>
.home_top {
  height: 18%;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  overflow: auto;
}
.interfaces_item {
  /* border: 1px solid red; */
  flex: 1;
  font-size: 16px;
  height: 100%;
  margin-right: 15px;
  max-width: 30%;
  border-radius: 20px;
  background-color: #7bb2e9;
  cursor: pointer;
  user-select: none;
}
.interfaces_item:hover {
  background-color: #6291c2;
  transition: all 0.2s;
  font-size: 1.8rem !important;
}
.interfaces_item:hover div {
  font-size: 1.9rem !important;
  color: rgb(189, 185, 185);
  transition: all 0.2s;
}
.interfaces_item div:nth-child(1) {
  width: 100%;
  height: 50%;
  font-size: 1.6rem;
  /* border: 1px solid rgb(88, 220, 52); */
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
}
.interfaces_item div:nth-child(2) {
  width: 100%;
  height: 30%;
  font-size: 1.6rem;
  /* border: 1px solid rgb(229, 208, 21); */
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
